<template>
  <div class="services-container">
    <h1 class="page-title">学生服务中心</h1>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card" shadow="hover">
          <div class="welcome-content">
            <h2>欢迎使用智慧校园学生服务平台</h2>
            <p>在这里，您可以使用各种校园服务功能，包括选课、查看课表、签到、作业管理等</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 教学服务 -->
    <div class="service-section">
      <h2 class="section-title">教学服务</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(service, index) in teachingServices" :key="index">
          <el-card class="service-card" shadow="hover" @click="navigateTo(service.path)">
            <div class="service-icon" :style="{ backgroundColor: service.color }">
              <el-icon :size="30"><component :is="service.icon" /></el-icon>
            </div>
            <div class="service-info">
              <h3>{{ service.title }}</h3>
              <p>{{ service.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 学务服务 -->
    <div class="service-section">
      <h2 class="section-title">学务服务</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(service, index) in academicServices" :key="index">
          <el-card class="service-card" shadow="hover" @click="navigateTo(service.path)">
            <div class="service-icon" :style="{ backgroundColor: service.color }">
              <el-icon :size="30"><component :is="service.icon" /></el-icon>
            </div>
            <div class="service-info">
              <h3>{{ service.title }}</h3>
              <p>{{ service.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 学业管理 -->
    <div class="service-section">
      <h2 class="section-title">学业管理</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(service, index) in studyManagementServices" :key="index">
          <el-card class="service-card" shadow="hover" @click="navigateTo(service.path)">
            <div class="service-icon" :style="{ backgroundColor: service.color }">
              <el-icon :size="30"><component :is="service.icon" /></el-icon>
            </div>
            <div class="service-info">
              <h3>{{ service.title }}</h3>
              <p>{{ service.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 学习指导 -->
    <div class="service-section">
      <h2 class="section-title">学习指导</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(service, index) in learningGuidanceServices" :key="index">
          <el-card class="service-card" shadow="hover" @click="navigateTo(service.path)">
            <div class="service-icon" :style="{ backgroundColor: service.color }">
              <el-icon :size="30"><component :is="service.icon" /></el-icon>
            </div>
            <div class="service-info">
              <h3>{{ service.title }}</h3>
              <p>{{ service.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Reading, Calendar, Position, Document, 
  Timer, Download, DocumentChecked, Histogram, 
  Star, Connection, Promotion 
} from '@element-plus/icons-vue'

const router = useRouter()

// 教学服务
const teachingServices = ref([
  {
    title: '选课管理',
    description: '选择课程、查看已选课表、退课',
    icon: 'Reading',
    path: '/student/course-selection',
    color: '#409EFF'
  },
  {
    title: '课表查看',
    description: '查看本学期课表和历史课表',
    icon: 'Calendar',
    path: '/student/schedule',
    color: '#67C23A'
  },
  {
    title: '签到管理',
    description: '课程签到、查看签到记录',
    icon: 'Position',
    path: '/student/attendance',
    color: '#E6A23C'
  },
  {
    title: '作业管理',
    description: '查看作业、提交作业、查看成绩',
    icon: 'Document',
    path: '/student/homework',
    color: '#F56C6C'
  }
])

// 学务服务
const academicServices = ref([
  {
    title: '请假申请',
    description: '提交请假申请、查看审批状态',
    icon: 'Timer',
    path: '/student/leave',
    color: '#9B59B6'
  },
  {
    title: '下载资料',
    description: '下载课程资料和学习材料',
    icon: 'Download',
    path: '/student/resources',
    color: '#3498DB'
  }
])

// 学业管理
const studyManagementServices = ref([
  {
    title: '成绩查询',
    description: '查看各学期课程成绩',
    icon: 'DocumentChecked',
    path: '/student/grades',
    color: '#1ABC9C'
  },
  {
    title: '学分查询',
    description: '查看已修学分和毕业要求',
    icon: 'Histogram',
    path: '/student/credits',
    color: '#E74C3C'
  },
  {
    title: '教学评价',
    description: '对课程和教师进行评价',
    icon: 'Star',
    path: '/student/evaluation',
    color: '#F39C12'
  }
])

// 学习指导
const learningGuidanceServices = ref([
  {
    title: '学习路线',
    description: '查看专业学习路线图',
    icon: 'Connection',
    path: '/student/learning-path',
    color: '#16A085'
  },
  {
    title: '推荐课程',
    description: '基于个人情况推荐课程',
    icon: 'Promotion',
    path: '/student/recommended-courses',
    color: '#8E44AD'
  }
])

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.services-container {
  padding: 20px;
  
  .page-title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
  
  .welcome-card {
    margin-bottom: 30px;
    
    .welcome-content {
      padding: 20px;
      text-align: center;
      
      h2 {
        margin-bottom: 10px;
        font-size: 20px;
        color: #303133;
      }
      
      p {
        color: #606266;
      }
    }
  }
  
  .service-section {
    margin-bottom: 30px;
    
    .section-title {
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #303133;
      padding-left: 10px;
      border-left: 4px solid #409EFF;
    }
    
    .service-card {
      height: 180px;
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .service-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 15px;
        color: #fff;
      }
      
      .service-info {
        text-align: center;
        
        h3 {
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
        
        p {
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
        }
      }
    }
  }
}

// 响应式样式
@media screen and (max-width: 768px) {
  .services-container {
    .service-card {
      height: auto;
      
      .service-info {
        h3 {
          font-size: 14px;
        }
        
        p {
          font-size: 12px;
        }
      }
    }
  }
}
</style> 